<template>
  <div class="h_home">
    <div class="help_img mb60"></div>
    <section>
      <div class="container">
        <section class="section knowledge-base">
          <section class="categories blocks">
            <ul class="blocks-list cur-point">
              <li class="blocks-item" v-for="(item,index) in menuList" :key="index">
                <div  class="blocks-item-link">
                  <h4 class="blocks-item-title">{{item.menu}}</h4>
                  <p class="blocks-item-description"></p>
               </div>
              </li>
            </ul>
          </section>

          <section class="articles">
            <h3>最近被推荐的文章</h3>
            <ul class="article-list promoted-articles">
              <li class="pro_list" v-for="(item,index) in newsList" :key="index">
                <div class=" ntitle flex-b"
                @click='navigateTo("/notice/detail",{i18nKey:currentTab.i18nKey,type:item.type,qid:item.autoid})'>
                    <p>{{item.title}}</p>  <p>{{item.wdate}}</p>
                </div>
              </li>
            </ul>
          </section>
        </section>

      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList:[{menu:'重要公告',type:'notice',},{menu:'最新活动',type:'activity',},{menu:'用户须知',type:'protocol',},
      {menu:'币币交易',type:'nocoinstice',},{menu:'合约交易',type:'contract',},{menu:'新手帮助',type:'help',}],
      newsList:[],
      tabCfg: [
        {
          i18nKey: "anouncement",
          id: "1",
          label: "系统公告"
        },
      ],
      currentTab:null,
    };
  },
  mounted() {
    this.set_articles();
    this.currentTab = this.tabCfg[0];
  },
  methods: {
    onTabChange(id, index) {
      this.currentId = id;
      this.currentTab = this.tabCfg[index];
    },
    set_articles(){
      this.request(this.api.articles,).then(res => {
              if(res.code==0){
                this.newsList=res.data;
              }else{
                this.errMsg(res.msg);
                return
              }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.h_home {
  .help_img {
    background-image: url(../../assets/images/help/help_001.png);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
  }
  .container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 5%;
  }
  .blocks-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      list-style: none;
      padding: 0;
  }
  .blocks-item {
    border: 1px solid rgba(53, 124, 225, 1);
    border-radius: 4px;
    box-sizing: border-box;
    color: rgba(53, 124, 225, 1);
    display: flex;
    flex: 1 0 340px;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 30px;
    max-width: 100%;
    text-align: center;
    &:hover{
      background: rgba(53, 124, 225, 1);
      .blocks-item-link {
        color: #ffffff;
      }
    }
  }
  .blocks-item-link {
    color: rgba(53, 124, 225, 1);
    padding: 20px 30px;
  }
  .blocks-item-title {
    margin-bottom: 0;
  }
  .blocks-item-description {
    font-weight: 300;
    margin: 0;
  }
  .mb60{margin-bottom: 60px;}
  // 文章列表模块
  .articles{
    h3 {
      font-size: 18px;
      font-weight: 600;
      padding: 15px 0;
    }
    .pro_list{
      .ntitle{
        border-bottom: 1px solid #ddd;
        color: rgba(28, 36, 44, 1);
        display: block;
        padding: 15px 0;cursor: pointer;
        &:hover{
          p{color: $color-primary;}
        }
      }

      .flex-b{display: flex;justify-content: space-between ;}
    }
  }
}
// 
@media (min-width: 768px){
  .h_home{
    .section {
      margin-bottom: 60px;
    }
    .blocks-list {
        margin: 0 -15px;
    }
    .blocks-item {
      margin: 0 15px 30px;
    }
  }
}
@media (min-width: 1160px){
  .h_home{
    .container {
      padding: 0;
      width: 90%;
    }
  }
}

</style>
